<template>
    <div id="algorithm-management" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div style="box-sizing: border-box;">
                <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item label="选择搜索方式：">
                            <el-select 
                                v-model="searchVal" 
                                filterable 
                                class="m-2" 
                                placeholder="选择搜索方式" 
                                @change="searchChange"
                            >
                                <el-option
                                    v-for="item in searchOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <!-- 名称 -->
                            <template v-if="searchVal === '1'">
                                <el-input v-model="transferVal" placeholder="名称" clearable />
                            </template>
                            <!-- 库名称 -->
                            <template v-else-if="searchVal === '2'">
                                <el-input v-model="transferVal" placeholder="库名称" clearable />
                            </template>
                            <!-- 算法方法名称 -->
                            <template v-else-if="searchVal === '3'">
                                <el-input v-model="transferVal" placeholder="算法方法名称" clearable />
                            </template>
                        </el-form-item>
                        <el-form-item >
                            <el-button @click="resetClick" icon="ele-Refresh"> 重置 </el-button>
                            <el-button @click='searchClick' type="primary" icon="ele-Search"> 查询 </el-button>
                            <el-button @click="showAddDialogHandler" icon="ele-Plus" type="primary"> 新增 </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">
                                    <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                        <el-table-column type="index" label="序号" width="55" align="center" :index="indexMethod" />
                                        <el-table-column prop="v_Name" label="名称"  align="center">
                                            <template #default="scope">
                                                <span class="title-stl" @click="showDetailDialogHandler(scope.row)"> {{scope.row.v_Name}} </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="v_LibName" label="算法库名称" align="center" />
                                        <el-table-column prop="v_MethodName" label="算法方法名称" align="center" />
                                        <el-table-column prop="n_Version" label="版本" align="center">
                                            <template #default="scope">
                                                <el-tag size="small">{{scope.row.n_Version}}</el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="状态" align="center">
                                            <template #default="scope">
                                                <span style="color: #9c381a;" v-if="scope.row.n_Status === 0"> 正常 </span>
                                                <span style="color: #67C23A;" v-else-if="scope.row.n_Status === 1"> 停用 </span>
                                                <span style="color: #777976;" v-else> 非法状态 </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="调用日志"  align="center">
                                            <template #default="scope">
                                                <span class="title-stl" @click="showCallDetailDialogHandler(scope.row)"> 查看日志 </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="v_Remark" label="备注" align="center" />
                                        <el-table-column label="操作" align="center" >
                                            <template #default="scope">
                                                <el-button @click="showEditDialogHandler(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> 编辑 </el-button>
                                                <el-button @click="deleteHandle(scope.row.n_Id , getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger"> 删除 </el-button>
                                                
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        
        <add-algorithm
            v-if="isShowAddDialog"
            :isShowDialog="isShowAddDialog"
            @updateData="getData"
            @close="closeAddDialogHandler"
        />

        <edit-algorithm
            v-if="isShowEditDialog"
            :isShowDialog="isShowEditDialog"
            :item="currentItem"
            @updateData="getData"
            @close="closeEditDialogHandler"
        />

        <detail-algorithm
            v-if="isShowDetailDialog"
            :isShowDialog="isShowDetailDialog"
            :item="currentItem"
            @close="closeDetailDialogHandler"
        />

        <call-detail-algorithm
            v-if="isShowCallDetailDialog"
            :isShowDialog="isShowCallDetailDialog"
            :item="currentItem"
            @close="closeCallDetailDialogHandler"
        />

    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted , reactive } from 'vue'
import getTableData from '/@/utils/getTableData'
import { QueryPageList , Delete } from '/@/api/its/algorithm'
import AddAlgorithm from './component/add-algorithm.vue'
import EditAlgorithm from './component/edit-algorithm.vue'
import DetailAlgorithm from './component/detail-algorithm.vue'
import CallDetailAlgorithm from './component/call-detail-algorithm.vue'
import { ElMessageBox , ElMessage } from 'element-plus'
export default defineComponent( {
    name: 'algorithm-management',
    components: { AddAlgorithm, EditAlgorithm, DetailAlgorithm, CallDetailAlgorithm },
    setup(props){
        
        //当前操作数据行
        const currentItem: any = ref<any>({});

        //==================================================
        //控制添加对话框显示隐藏
        const isShowAddDialog = ref();
        //显示添加对话框
        const showAddDialogHandler = () => {
            isShowAddDialog.value = true
        }
        //关闭添加对话框
        const closeAddDialogHandler = () => {
            isShowAddDialog.value = false
        }
        //==================================================
        //控制修改对话框显示隐藏
        const isShowEditDialog = ref();
        //显示修改对话框
        const showEditDialogHandler = (row: any) => {
            currentItem.value.n_Id = row.n_Id
            currentItem.value.v_Name = row.v_Name
            isShowEditDialog.value = true
        }
        //关闭修改对话框
        const closeEditDialogHandler = () => {
            isShowEditDialog.value = false
            currentItem.value = {};
        }

        //==================================================
        //控制详情对话框显示隐藏
        const isShowDetailDialog = ref();
        //显示详情对话框
        const showDetailDialogHandler = (row: any) => {
            currentItem.value.n_Id = row.n_Id
            currentItem.value.v_Name = row.v_Name
            isShowDetailDialog.value = true
        }
        //关闭详情对话框
        const closeDetailDialogHandler = () => {
            isShowDetailDialog.value = false
            currentItem.value = {};
        }

        //==================================================

        //控制调用日志对话框显示隐藏
        const isShowCallDetailDialog = ref();
        //显示调用日志对话框
        const showCallDetailDialogHandler = (row: any) => {
            currentItem.value.n_Id = row.n_Id
            currentItem.value.v_Name = row.v_Name
            isShowCallDetailDialog.value = true
        }
        //关闭调用日志对话框
        const closeCallDetailDialogHandler = () => {
            isShowCallDetailDialog.value = false
            currentItem.value = {};
        }

        //==================================================
        

        const searchVal = ref('1')
        const searchObj:any = reactive({})

        let searchName = '1'
        const transferVal = ref()
        /*** 搜索类型选择事件 searchChange */
        const searchChange = (val:any) => {
            searchName = val
            transferVal.value = ''
        }

        /*** searchClick 查询按钮 */
        const searchClick = () => {
            resetFun()
            if(searchName === '1'){ searchObj.v_Name = transferVal.value }
            if(searchName === '2'){ searchObj.v_LibName = transferVal.value }
            if(searchName === '3'){ searchObj.v_MethodName = transferVal.value }
        }

        /*** resetFun */
        const resetFun = () => {
            let newObj = Object.keys(searchObj)
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = ''
                })
            }
        }

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            resetFun()
            searchVal.value = '1'
            transferVal.value = ''
        }

        /*** deleteHandle 删除数据事件 */
        const deleteHandle = async (val: String | Number , updateFun: Function) => {
            ElMessageBox.confirm('请确定是否删除此条数据','警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {n_Id : val}
                try {
                    let res: any = await Delete(param)
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        }

        /*** onMounted 页面加载时显示 */
        onMounted(() => {})

        return {
            ...getTableData(QueryPageList,{},searchObj),
            deleteHandle,
            resetClick,
            searchClick,
            searchVal,
            searchChange,

            currentItem,
            isShowAddDialog,
            showAddDialogHandler,
            closeAddDialogHandler,
            isShowEditDialog,
            showEditDialogHandler,
            closeEditDialogHandler,
            isShowDetailDialog,
            showDetailDialogHandler,
            closeDetailDialogHandler,

            isShowCallDetailDialog,
            showCallDetailDialogHandler,
            closeCallDetailDialogHandler,

            searchOptions: [{
                value: '1',
                    label: '名称'
                }, {
                    value: '2',
                    label: '算法库名称'
                }, 
                {
                    value: '3',
                    label: '算法方法名称'
                }
            ], // 搜索方式
            transferVal,
        }
    },
} )
</script>
<style scoped lang="scss">
    #algorithm-management {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
        .title-stl {
            color: #0052D9;
            text-decoration: underline;

            &:hover {
                text-decoration: none;
                cursor: pointer;
            }
        }
    }
</style>